<template>
    <div class="productDetail">
        <div class="chat"></div>
        <header class="productDetail-header">
            <i @click="backward"></i>
            <span>商品详情</span>
        </header>
        <div class="swiper-container" id="s1">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(p,index) in detail.pics" :key="index">
                    <img :src="p" />
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="productDetail-content">
            <p>{{detail.name}}</p>
            <p>{{detail.description}}</p>
            <p>
                <span>{{detail.salesPrice}}</span>
                <span>{{detail.marketPrice}}</span>
                <span>总销量{{detail.buyNowNumber}}</span>
            </p>
            <p>
                <span>促销</span>
                <span>
                    <i>{{detail.rewardMark}}</i>{{detail.ruleName}}</span>
            </p>
            <p>
                <span>口味</span>
                <span>其他</span>
            </p>
        </div>
        <div class="productDetail-hostSay">
            <div class="productDetail-hostSay-header">
                <span>主人说</span>
                <span>好评率</span>
                <span>100%</span>
                <span></span>
            </div>
            <div class="productDetail-hostSay-content">
                <div class="productDetail-hostSay-dC" v-for="(item,index) in detail.items" :key="index">
                    <div class="productDetail-hostSay-userData">
                        <div class="productDetail-hostSay-userDataU">
                            <img :src="item.userPic" />
                        </div>
                        <div class="productDetail-hostSay-userDataD">
                            <span>
                                <i>{{item.userName}}</i>
                                <i>{{item.time}}</i>
                            </span>
                            <span>
                                <img src="../../static/img5/icon-star.png" />
                                <img src="../../static/img5/icon-star.png" />
                                <img src="../../static/img5/icon-star.png" />
                                <img src="../../static/img5/icon-star.png" />
                                <img src="../../static/img5/icon-star.png" />
                            </span>
                        </div>
                    </div>
                    <div class="productDetail-hostSay-comment">
                        {{item.content}}
                    </div>
                </div>
            </div>
            <div class="productDetail-hostSay-ssRecommend">
                <span>松鼠推荐</span>
            </div>
            <div class="productDetail-hostSay-ssRecommendSlide">
                <div class="swiper-container" id="s2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide swiper-slide1" v-for="i in num" :key="i">
                            <div class="productDetail-hostSay-ssRecommendSlide" v-for="(s,index) in detail.slide.slice((i-1)*2, i*2)" :key="index">
                                <img :src="s.thumbUrl" />
                                <div class="ssRecommendSlide">
                                    <p>{{s.productName}}</p>
                                    <p>{{s.alias}}</p>
                                    <p>
                                        <span>{{s.matchPrice}}</span>
                                        <span>{{s.marketPrice}}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        <div class="goOn-drag">
            <!-- <i></i>
            <span>继续拖动，查看图文详情</span> -->
        </div>
        <footer id="footer">
            <router-link to="/shoppingCart">
                <img src="../../static/img5/icon-cart.png" />
            </router-link>
            <span>{{productSum}}</span>
            <p>购物车</p>
            <p :class="{'isCollect':isCollect}" @click="changeCollect" class="p1">收藏</p>
            <button @click="buy(detail)">加入购物车</button>
            <button @click="BuyingP">立即购买</button>
        </footer>
        <div class="ifCollect" ref="disappear">
            <p :class="{'ifCollect_1':!isCollect}">收藏成功</p>
            <p :class="{'ifCollect_1':isCollect}">取消收藏成功</p>
        </div>
        <div class="immediatelyBuy">
            <div>
                <!-- <img src=" "/> -->
            </div>
        </div>
        <my-account @closing="BuyingC" v-if="isBuy" class="child" :detailData="detail"></my-account>
    </div>
</template>

 <script scoped>
import account from "./account.vue"
export default {
    data: function () {
        return {
            detail: {
                items: [],
                pics: [],
                slide: [],
                salesPrice: "",
                marketPrice: "",
                rewardMark: "",
                ruleName: "",
                name: "",
                description: "",
                buyNowNumber: "",
                pic: "",
                count: 1
            },
            isCollect: false,
            isBuy: false
        }
    },
    computed: {
        num() {
            return Math.ceil(this.detail.slide.length / 2);
        },
        productSum() {
            return this.$store.getters.productSum;
        },

    },
    methods: {
        BuyingC() {
            this.isBuy = false;
        },
        BuyingP() {
            this.isBuy = true;
        },
        buy(detail) {
            this.$store.commit("addProduct", detail);
        },
        changeCollect() {
            this.isCollect = !this.isCollect;
            let _this = this;
            this.$refs.disappear.style.display = "block"
            setTimeout(function () {
                _this.$refs.disappear.style.display = "none";
            }, 1500);
            this.$store.commit("changeFavorite", this.detail);
            
        },
        buy(detail) {
            this.$store.commit("addProduct", detail);
        },
        backward() {
            this.$router.go(-1);
        }
    },
    mounted: function () {
        fetch("../../static/data/productDetail/slide.json")
            .then(res => {
                return res.json();
            })
            .then(res => {
                this.detail.pics = res.data.pics;
                this.detail.pic = res.data.pics[0];
                this.detail.name = res.data.name;
                this.detail.ruleName = res.data.ruleName;
                this.detail.rewardMark = res.data.rewardMark;
                this.detail.description = res.data.description;
                this.detail.buyNowNumber = res.data.buyNowNumber;
                this.detail.marketPrice = res.data.marketPrice.value;
                this.detail.salesPrice = res.data.salesPrice.value;
                var data = null;
                console.log(this.$route.query.data);
                if (this.$route.query.data) {
                    data = this.$route.query.data;
                }
                if (data) {
                    this.detail.pic = data.pic;
                    this.detail.name = data.name;       
                    console.log("data", data);
                    if (typeof data.salesPrice == "object") {
                        console.log("价格", data.salesPrice);
                        this.detail.marketPrice = data.marketPrice.value;
                        this.detail.salesPrice = data.salesPrice.value;
                    } else {
                        this.detail.marketPrice = data.marketPrice;
                        this.detail.salesPrice = data.salesPrice;
                    }
                }
                var mySwiper = new Swiper('#s1', {
                    autoplay: 2000,
                    loop: true,
                    pagination: '.swiper-pagination',
                    observer: true,
                    observeParents: true,
                });
            });
        fetch("../../static/data/productDetail/recommend.json")
            .then(res => {
                return res.json();
            })
            .then(res => {
                this.detail.slide = res.data;
                var mySwiper = new Swiper('#s2', {
                    autoplay: 2000,
                    loop: true,
                    pagination: '.swiper-pagination',
                    observer: true,
                    observeParents: true,
                });
            });
        fetch("../../static/data/productDetail/comment.json")
            .then(res => {
                return res.json();
            })
            .then(res => {
                this.detail.items = res.data.items;
            });
        this.$store.state.favoriteList.forEach(function (val, index, data) {
            if (val.name == this.detail.name) {
                this.isCollect = true;
            }
        });
    },
    components: {
        "my-account": account,
    }
}
</script>

<style>
@import "../../static/css/base.css";
@import "../../static/css/swiper.min.css";
.child {
    width: 100%;
    height: 1rem;
}

.ifCollect {
    background: #000;
    opacity: 0.6;
    color: white;
    font-size: .23rem;
    position: fixed;
    left: 35%;
    bottom: 1.5rem;
    border-radius: 5px;
    text-align: center;
    z-index: 111;
    padding: 0.15rem .3rem;
    display: none;
}

.ifCollect_1 {
    display: none;
}

.swiper-slide img {
    height: 5.5rem;
    width: 100%;
}

.productDetail {
    width: 100%;
    /* height: 100%;   */
    position: relative;
    z-index: 99;
    background: white;
}

.chat {
    position: fixed;
    z-index: 99;
    right: .2rem;
    bottom: 1.3rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: url(../../static/img5/icon-chat.png) no-repeat center center;
    background-color: yellowgreen;
    background-size: 50%;
}

.productDetail-header {
    width: 100%;
    height: 0.7rem;
    font-size: .28rem;
    display: flex;
    align-items: center;
}

.productDetail-header i {
    width: .5rem;
    height: .7rem;
    background: url(../../static/img5/icon-arrow1.png) no-repeat .1rem center;
    background-size: 50%;
}

.productDetail-header span {
    padding-left: 30%;
}

.productDetail-content {
    font-size: .27rem;
    padding: 0 .1rem;
    border-bottom: 5px solid rgb(245, 245, 245);
}

.productDetail-content p:first-of-type {
    font-size: .27rem;
    font-style: bolder;
    padding: .07rem 0;
}

.productDetail-content p:nth-of-type(2) {
    font-size: .15rem;
    color: red;
}

.productDetail-content p:nth-of-type(3) span:first-of-type {
    font-size: .33rem;
    color: red;
}

.productDetail-content p:nth-of-type(3) span:nth-of-type(2) {
    font-size: .1rem;
    padding: 0 0 0 .1rem;
    text-decoration: line-through;
}

.productDetail-content p:nth-of-type(3) span:last-of-type {
    font-size: .1rem;
    padding-left: 52%;
    color: #ccc;
}

.productDetail-content p:nth-of-type(4) {
    font-size: .22rem;
    padding: .28rem 0 .28rem 0;
    display: flex;
}

.productDetail-content p:nth-of-type(4) i {
    border: 1px solid red;
    font-size: .15rem;
    color: red;
    font-style: normal;
    padding: .02rem .06rem;
    border-radius: 20%;
    margin-right: 5%;
}

.productDetail-content p:nth-of-type(4) span:first-of-type {
    display: block;
    height: .1rem;
    padding-right: .25rem;
    color: #ccc;
}

.productDetail-content p:nth-of-type(4) span:last-of-type {
    display: block;
    height: .55rem;
    width: 86%;
}

.productDetail-content p:nth-of-type(5) {
    font-size: .22rem;
    padding: .08rem 0;
}

.productDetail-content p:nth-of-type(5) span:first-of-type {
    padding-right: .2rem;
    color: #ccc;
}

.productDetail-hostSay {
    font-size: .22rem;
}

.productDetail-hostSay-header {
    padding: .1rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.productDetail-hostSay-header span:first-of-type {
    margin-right: 56%;
}

.productDetail-hostSay-header span:nth-of-type(3) {
    padding: 0 0.05rem;
    color: red;
}

.productDetail-hostSay-header span:last-of-type {
    width: .3rem;
    height: .3rem;
    background: url(../../static/img5/icon-arrow.png) no-repeat right center;
    background-size: 80%;
}

.productDetail-hostSay-userData {
    padding: 0 .1rem;
    width: 100%;
    display: flex;
    border-bottom: 1px solid rgb(245, 245, 245);
}

.productDetail-hostSay-userDataU {
    height: .4rem;
    padding: .05rem 0;
}

.productDetail-hostSay-userDataU img {
    height: .4rem;
    width: .4rem;
    line-height: .4rem;
    border-radius: 50%;
}

.productDetail-hostSay-userDataD {
    display: flex;
    flex-direction: column;
}

.productDetail-hostSay-userDataD span:first-of-type {
    display: flex;
    font-size: .1rem;
    width: 4.8rem;
    justify-content: space-between;
}

.productDetail-hostSay-userDataD span:first-of-type i {
    font-style: normal;
    color: #ccc;
}

.productDetail-hostSay-userDataD span:last-of-type {
    display: flex;
}

.productDetail-hostSay-userDataD span:last-of-type img {
    height: .18rem;
    width: .18rem;
}

.productDetail-hostSay-comment {
    width: 100%;
    padding: .1rem;
    font-size: .1rem;
}

.productDetail-hostSay-ssRecommend {
    padding: .1rem;
    align-items: center;
}

.swiper-slide1 {
    display: flex;
    justify-content: space-between;
    padding: 0 .2rem;
}

.productDetail-hostSay-ssRecommendSlide img {
    width: 2.2rem;
    height: 2.5rem;
}

#footer {
    width: 100%;
    height: .7rem;
    background: white;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    z-index: 3;
    justify-content: space-around;
    align-items: center;
}

#footer p {
    color: #777;
    padding-top: .35rem;
}

#footer .p1 {
    background: url(../../static/img5/icon-like.png) no-repeat center .1rem;
    background-size: 80%;
}

.isCollect {
    background: url(../../static/img5/icon-like1.png) no-repeat center .1rem;
}

#footer button:first-of-type {
    width: 1.8rem;
    height: .55rem;
    background: white;
    border: 1px solid orange;
    color: orange;
    border-radius: 5px;
}

#footer button:last-of-type {
    width: 1.5rem;
    height: .55rem;
    background: yellowgreen;
    color: white;
    outline: none;
    border-radius: 5px;
    border: none;
}

#footer img {
    width: .55rem;
    height: .55rem;
    position: fixed;
    bottom: .35rem;
    left: 0.3rem;
}

#footer span {
    position: fixed;
    bottom: .7rem;
    left: 0.7rem;
    color: white;
    display: block;
    width: .25rem;
    height: .25rem;
    background: orange;
    border-radius: 50%;
    text-align: center;
    font-style: bold;
}

.goOn-drag {
    width: 100%;
    height: 1.3rem;
    background: rgb(245, 245, 245);
    padding-top: .1rem;
    font-size: .2rem;
    display: flex;
    justify-content: center;
    /* padding-left:.5rem; */
}

.goOn-drag i {
    width: .22rem;
    height: .22rem;
    border-radius: 50%;
    background: url(../../static/img5/icon-nut.png) no-repeat center center;
    background-size: 75%;
    background-color: #aaa;
}

.goOn-drag span {
    color: #aaa;
    font-size: .2rem;
}
</style>